<template>
    <div id="friends">
    <div id="friendMap"></div>
        <div id="findFriendBar">
            <div id="f-header">
                <div>
                    <span class="el-icon-arrow-left" @click="$router.go(-1)">返回</span>
                    <span @click="$router.push('/personal-centre')">个人中心</span>
                </div>

                <div>
                    <img alt="头像" :src="userData.img" />
                    <div>
                        <p>昵称:{{userData.nickname}} </p>
                        <p @click="show.personalMsg=true">编辑个人资料<span class="el-icon-edit-outline"></span></p>
                        <p @click="tabsSelected='我的合租请求'" >查看已发布的合租请求</p>
                    </div>
                </div>
                <div @click="show.findFriend2=true">
                    添加你的合租要求，开始寻找志同道合的合租室友吧!
                </div>
            </div>
            <div id="f-tab">
                <span @click="tabsSelected='新伙伴'" :class="tabsSelected==='新伙伴'?'tabActive':'tabOffActive'">新伙伴</span>
                <span @click="tabsSelected='已关注'" :class="tabsSelected==='已关注'?'tabActive':'tabOffActive'">已关注</span>
                <span @click="tabsSelected='我的合租请求'" :class="tabsSelected==='我的合租请求'?'tabActive':'tabOffActive'">我的合租请求</span>
            </div>
            <div id="f-container" @scroll="scrollChange">
                <div class="friendsMsg" v-for="(friend,index) in friendsDataShow" :key="friend.id" v-if="tabsSelected==='新伙伴'|tabsSelected === '已关注'">
                    <img alt="头像" :src="friend.img"/>
                    <div>
                        <p>昵称：{{friend.nickname}}</p><i v-if="!friend.isInterested" @click="like(true,friend.id,index)" class="el-icon-star-off"></i>
                        <i v-if="friend.isInterested" @click="like(false,friend.id,index)" class="el-icon-star-on"></i>
                        <p>合租地址：{{friend.location}}</p>
                        <p v-if="!show.tips">
                            匹配项:
                            <span v-if="userData.rentMsg[0].expectPrice === friend.expectPrice">房租</span>
                            <span v-if="userData.rentMsg[0].pet === friend.pet">宠物</span>
                            <span v-if="userData.rentMsg[0].restTime === friend.restTime">休息时间</span>
                            <span v-if="userData.rentMsg[0].expectSex===''|userData.rentMsg[0].expectSex === friend.expectSex">性别要求</span>
                        </p>
                        <p v-if="show.tips" class='tipsStyle' @click="show.findFriend2=true">
                            未发布任何合租请求，请提交合租要求！
                        </p>
                        <span @click="fingToMap(friend)">详情</span>
                    </div>
                </div>
                <div class="friendsMsg myRentMsg" v-for="item in userData.rentMsg" :key="item.id" v-if="tabsSelected === '我的合租请求'">
                <p>{{item.location}}</p><a v-if="item.isPush===2" @click="issue(item)">发布</a><a v-if="item.isPush===1"  @click="issue(item)" style="color:rgba(128,128,128,0.68)">取消</a>
                <a @click="updateMsg=item;show.findFriend2=true">修改</a><a @mouseover.once="linkHouse(item.hid,$event)" v-if="item.hid>=0" target="_blank">房源</a>
                </div>
                </div>
            </div>
        <findFriend id="findFriend2"  :updateMsg='updateMsg' v-if="show.findFriend2" @close="closeFind()"></findFriend>
        <personalMsg id="personalMsg" v-if="show.personalMsg" @closePersonalMsg="closePersonalMsg"></personalMsg>
    </div>
</template>

<script>
    import AMap from 'AMap';
    import findFriend from '../components/findFriend.vue';
    import personalMsg from '../components/personalMsg.vue';
    export default {
        name: "friends",
        data() {
            return {
                show: {
                    findFriend2: false,
                    tips: false,
                    personalMsg:false
                },
                tabsSelected: '新伙伴',
                /*地图参数*/
                friendMap: null,
                clickMarker: new AMap.Marker({
                    position: '', // 基点位置
                    offset: new AMap.Pixel(-15, -20) // 相对于基点的偏移位置
                }),
                mass: new AMap.MassMarks({}, { //海量标记点
                    opacity: 0.8,
                    zIndex: 111,
                    cursor: 'pointer',
                    // zooms:[13,18],
                    style: {
                        url: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        anchor: new AMap.Pixel(15, 20),
                        size: new AMap.Size(30, 40)
                    }
                }),
                markerFriendId:'',
                /*用户信息*/
                token: () => {
                    let token = document.cookie.match(/(^| )login_token=([^;]*)(;|$)/);//[^;]匹配除了分号之外的任何字符
                    return token[2];
                },
                userData: {
                    nickname: '',
                    rentMsg: [{
                        expectPrice: '',
                        pet: '',
                        resttime: '',
                        expectSex: ''
                    }]
                },
                updateMsg: {},
                /*伙伴信息*/
                friendsDataReady: {},
                friendsDataShow: {}
            }
        },
        methods: {
            /*地图初始化*/
            refreshMap() {
                this.friendMap = new AMap.Map('friendMap', {
                    zoom: 12,//级别
                    mapStyle: 'amap://styles/macaron', //设置地图的显示样式
                    center: [113.27, 23.13],//中心点坐标
                    zooms: [10, 18]
                });
                this.mass.setMap(this.friendMap);
                this.mass.on('mouseover',(e)=>{
                    this.markerFriendId= e.data.id;
                });
                this.friendMap.on('click',()=>{
                    this.markerFriendId = '';
                })
            },
            /*获取个人信息*/
            getUserMsg() {
                this.$axios.post(this.Global.api + '/index.php/index/userInfo', this.$qs.stringify({token: this.token()}),
                    {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(res => {
                    if (res.status >= 200 && res.status < 300 && res.data.res === 0) {
                        res.data.data.rentMsg = [{
                            expectPrice: '',
                            pet: '',
                            resttime: '',
                            expectSex: ''
                        }];
                        this.userData = res.data.data;
                        this.$axios.post(this.Global.api + '/index.php/index/heZuInfo', this.$qs.stringify({token: this.token()}), {
                            headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
                        }).then(res => {
                            if (res.status >= 200 && res.status < 300 && res.data.res === 0) {
                                if (res.data.num) {
                                    this.userData.rentMsg = res.data.data;
                                    this.show.tips = false;
                                } else {
                                    this.show.tips = true;
                                }
                            }
                        })
                    }
                });
                return undefined;
            },
            /*刷新合租伙伴数据*/
            refreshFriendsMsg() {
                this.$axios.post(this.Global.api + '/index.php/index/heZuInfo', this.$qs.stringify({token:this.token()}), {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
                }).then(res => {
                    if (res.status >= 200 && res.status < 300 && res.data.res === 0) {
                        this.friendsDataReady = res.data.allHzData;
                        this.friendsDataShow = this.friendsDataReady.slice(0, 10);
                        this.mass.setData(this.friendsDataReady);
                    }
                });
                return undefined;
            },
            /*刷新关注的房源数据*/
            refreshLike(){
                this.$axios.post(this.Global.api + '/index.php/index/userInterestedHouse',this.$qs.stringify({token:this.token()}), {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
                }).then(res => {
                    if (res.status >= 200 && res.status < 300 && res.data.res === 0) {
                        this.friendsDataReady = res.data.hzhousedata;
                        this.friendsDataShow = this.friendsDataReady;
                        this.mass.setData(this.friendsDataReady);
                        this.$forceUpdate();
                    }else{
                        this.friendsDataShow = [];
                    }
                });
                return undefined;
            },
            /*标记关注*/
            like(flag,id,e){
                let data = {
                    token:this.token()
                };
                data.id=id;
                data.focusType =flag? 'addhzid':'delhzid';
                this.$axios.post(this.Global.api + '/index.php/index/addInterestedHid', this.$qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
                    if (res.status >= 200 && res.status < 300) {
                        console.log(this.friendsDataShow[e]);
                        if(flag){
                            // e.target.className='el-icon-star-on';
                            this.friendsDataShow[e].isInterested=1;
                            console.log(this.friendsDataShow[e]);
                        }else{
                            this.friendsDataShow[e].isInterested=0;
                            console.log(this.friendsDataShow[e]);
                            // e.target.className='el-icon-star-off';
                        }
                    }
                });

            },
            /*滚动条刷新刷剧*/
            scrollChange(e) {
                if (e.target.scrollTop >= e.target.scrollHeight - e.target.offsetHeight - 10 && this.friendsDataReady[this.friendsDataShow.length + 1]) {
                    this.friendsDataShow.push(this.friendsDataReady[this.friendsDataShow.length + 1])
                }
                return undefined;
            },
            /*关闭表单更新数据*/
            closeFind() {
                this.show.findFriend2 = false;
                this.updateMsg = null;
                this.getUserMsg();
            },
            /*关闭修改个人信息更新*/
            closePersonalMsg(){
                this.show.personalMsg = false;
                this.getUserMsg();
            },
            /*控制合租请求的发布与未发布*/
            issue(item) {
                let data = {
                    token: this.token(),
                    id: item.id,
                    operate: 2
                };
                data.isPush = item.isPush === 1 ? 2 : 1;
                this.$axios.post(this.Global.api + '/index.php/index/hzInfoInsertOrUpdate', this.$qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
                    if (res.status >= 200 && res.status < 300) {
                        item.isPush = data.isPush;
                    }
                });
                return false;
            },
            /*链接至房源地址*/
            linkHouse(id, e) {
                this.$axios.get(this.Global.api + '/index.php/index/housedata', {params: {id}}).then(res => {
                    if (res.status >= 200 && res.status < 300) {
                        e.target.href = res.data.pc_url;
                        window.open(res.data.pc_url);
                        return true;
                    }
                });
            },
            /*地图定位伙伴*/
            fingToMap(item){
                this.markerFriendId = item.id;
                this.friendMap.setZoomAndCenter(14,item.lnglat);
            }
        },
        beforeCreate() {
        },
        created() {
            this.refreshFriendsMsg();
            this.getUserMsg();
        },
        mounted() {
            this.refreshMap();
        },
        components: {
            findFriend,
            personalMsg
        },
        watch: {
            markerFriendId() {
                if (this.markerFriendId) {
                    this.$axios.get(this.Global.api+'/index.php/index/heZuIdData',{params:{
                        id:this.markerFriendId
                        }}).then(res=>{
                            if(res.status >=200 &&res.status<300){
                                let friendData=res.data;
                                        let content = `<div class="mapFriendMsg">
                                                    <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">
                                                    <div>
                                                    <div id="userData">
                                                    <img src="${friendData.userdata.img}">
                                                    <p>
                                                    <span> 昵称：  ${friendData.userdata.nickname} </span>
                                                    <span> 性别： ${friendData.userdata.sex===1?'男':'女'}</span>
                                                    <span> 电话： ${friendData.userdata.tel}</span>
                                                    </p>
                                                    </div>
                                                    <div id="houseData">
                                                    <p><span>合租地点：</span>${friendData.housedata.location}</p>
                                                    <p><span>其他要求：</span>${friendData.housedata.other?friendData.housedata.other:'无'}</p>
                                                    <p>匹配项：`;
                                if(this.userData.rentMsg[0].expectPrice === friendData.housedata.expectPrice){
                                    content+=`<span>房租</span>`
                                }
                                if(this.userData.rentMsg[0].pet === friendData.housedata.pet){
                                    content+=`<span>宠物</span>`
                                }
                                if(this.userData.rentMsg[0].restTime === friendData.housedata.restTime){
                                    content+=`<span>休息时间</span>`
                                }
                                if(this.userData.rentMsg[0].expectSex===''|this.userData.rentMsg[0].expectSex === friendData.housedata.expectSex){
                                    content+=`<span>性别要求</span>`
                                }
                                content+=`</p></div></div></div>`
                                        this.clickMarker.setTop(true);
                                        this.clickMarker.setContent(content);
                                        this.clickMarker.setPosition([friendData.housedata.lon, friendData.housedata.lat]);
                                        this.friendMap.add(this.clickMarker);
                            }
                    })
                } else {
                    this.friendMap.remove(this.clickMarker);
                }
            },
            tabsSelected(){
                this.markerFriendId = '';
                if(this.tabsSelected === '新伙伴'){
                    this.refreshFriendsMsg();
                }else if(this.tabsSelected === '已关注'){
                    this.refreshLike();
                }
        }
        }
    }

</script>
<style>
    .mapFriendMsg{
        display: flex;
        position: absolute;
        z-index: 5;
    }
    .mapFriendMsg img{
        width: 30px;
        height: 40px;
    }
    .mapFriendMsg>div{
        display: block;
        width: 300px;
        border-radius: 10px;
        background-color: white;
        cursor: auto;
    }
    #userData{
        display: flex ;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1.5px solid #979797;
    }
   #userData img{
        display: block;
        position: relative;
        left: 0;
        width: 50px;
        height: 50px;
        margin: 7px;
        border-radius: 50%;
        border: 1.5px solid #979797;
    }
   #userData span{
        display: block;
        font-size: 0.8em;
        margin: auto 0;
    }
   #houseData{
       width: 90%;
       margin: 0 auto;
   }
    #houseData p{
        padding: 10px auto;
        font-size: 0.9em;
    }
    #houseData p:last-child{
        margin-bottom: 5px;
        color: #bcbcbc;
    }
    #houseData p:last-child span{
        position: relative;
        top: 2px;
        border: 1px solid #ff0a60;
        border-radius: 3px;
        padding: 2px;
        margin: 15px 5px;
        background-color: #ff0a60;
        color: white;
    }
</style>
<style scoped>
    #findFriend2{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        z-index: 1;
        top: 0;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
    }
    #friends{
        position: absolute;
        top:0;
        width: 100%;
        min-width: 1000px;
        height: 100%;
    }
    #friendMap {
        float: right;
        color: rgb(48, 48, 48);
        width:calc(100% - 450px);
        height: 100%;
    }
    #findFriendBar{
        float: left;
        width: 450px;
        height: 100%;
        background-color: #fcfcfc;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
    }
    #f-header{
        width: 100%;
        height: 150px;
        background-color: #ff0a60;
        color: white;
    }
    #f-header div:nth-child(1){
        display: flex;
        justify-content: space-between;
        align-items: center;
        float: top;
        width: 100%;
        font-size: 1em;
        height: 30px;
    }
    #f-header div:nth-child(1) span{
        margin: 0 7px ;
        cursor: pointer;
    }
    #f-header div:nth-child(1) span:hover{
        text-decoration: underline;
    }
    #f-header>div:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9em;
    }
    #f-header>div:nth-child(2) img{
        width: 75px;
        height: 75px;
        border-radius: 50% ;
        margin: 5px;
    }
    #f-header>div:nth-child(2) p{
        width: 220px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #f-header>div:nth-child(2) p:nth-child(2){
        cursor: pointer;
    }
    #f-header>div:nth-child(2) p:nth-child(2):hover{
        text-decoration: underline;
    }
    #f-header>div:nth-child(3){
        width: 95%;
        height: 35px;
        margin: 0 auto;
        border-top: 1px solid #e7e7e7;
        text-align: center;
        font-weight: bold;
        line-height: 35px;
        cursor: pointer;
    }
    #f-header>div:nth-child(3):hover{
        text-decoration: underline;
    }
    #f-tab{
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: white;
    }
    #f-tab span{
        position: relative;
        color: #ff0a60;
        margin-left: 30px;
        cursor: pointer;
    }
    #f-tab .tabActive:after{
        display: inline;
        content: '';
        position: absolute;
        width: calc(100% + 10px);
        left: -7px;
        top: 20px;
        border: 1.5px solid #ff0a60;
        animation: slide 0.8s linear;
    }
    @keyframes slide {
        from{
            width: 0;
        }to{
        width: calc(100% + 10px);
                 }
    }
    #f-tab .tabOffActive:after{
        content: '';
        position: absolute;
        left: -7px;
        top: 20px;
         border: 1.5px solid #ff0a60;
        animation: slideout 0.8s linear;
        animation-fill-mode: forwards;
    }
    @keyframes slideout {
        0%{
            border: 1.5px solid #ff0a60;
            width: calc(100% + 20px);
        }
        100%{
         width: 0;
         border: 1.5px solid transparent ;
        }
    }
    #f-container{
        width: 100%;
        height: calc(100% - 180px);
        overflow-y: auto;
    }
    #f-container::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }
    #f-container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(255, 10, 96, 0.7);
        background: rgba(255, 10, 96, 0.71);
    }
    #f-container::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
    }
    #f-container .friendsMsg{
        width: 95%;
        height: 75px;
        background-color: white;
        margin: 5px auto;
        padding: 5px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
    }
    #f-container .friendsMsg img{
        height: 65px;
        width: 65px;
        float: left;
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-radius: 50%;
    }
    #f-container .friendsMsg div{
        position: relative;
        height: 70px;
        width: calc(100% - 85px);
        padding-top: 5px;
        float: left;
        font-size: 0.95em;
        color: #515151;
    }
    #f-container .friendsMsg div i{
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 1.5em;
        cursor: pointer;
        color: #ff0a60;
    }
    #f-container .friendsMsg div span:last-child{
        position: absolute;
        bottom: 5px;
        right: 5px;
        font-size: 1em;
        cursor: pointer;
        color: #ff0a60;
    }
    #f-container .friendsMsg div span:last-child:hover{
        text-decoration: underline;
    }
    #f-container .friendsMsg div p{
        margin-bottom: 3px;
    }
    #f-container .friendsMsg div p:nth-child(4){
        /*margin-top: 5px;*/
        /*margin-bottom: 5px;*/
        color: #bcbcbc;
    }
    #f-container .friendsMsg div p:nth-child(4) span{
        position: relative;
        top: 2px;
        border: 1px solid #ff0a60;
        border-radius: 3px;
        padding: 2px;
        margin: 15px 5px;
        background-color: #ff0a60;
        color: white;
    }
    #f-container .friendsMsg .tipsStyle{
        color: #ff0a60 !important;
        cursor: pointer;
    }
    #f-container .friendsMsg .tipsStyle:hover{
        text-decoration: underline;
    }
    #f-container .myRentMsg{
        height: 30px;
    }
    #f-container .myRentMsg p{
        line-height: 28px;
        width: 280px;
        float: left;
        text-indent: 0.5em;
        font-size: 1.3em;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

    #f-container .myRentMsg a{
        display: block;
        float: right;
        margin-right: 1em;
        line-height: 30px;
        color: #ff0a60;
    }
    #f-container .myRentMsg a:hover{
        text-decoration: underline;
    }
    /*#findFriend{*/
        /*background-color: white;*/
        /*height: 170px;*/
        /*width: 170px;*/
        /*z-index: 1;*/
        /*top: 200px;*/
        /*left: 100px;*/
        /*position: fixed;*/
        /*border:1px solid rgba(0,0,0,0.3);*/
        /*border-radius: 20px;*/
        /*!*水平居中*!*/
        /*display: flex;*/
        /*justify-content: center;*/
    /*}*/
    /*#findFriend p:nth-child(1){*/
        /*margin: 0 auto;*/
        /*color: #ff0a60;*/
        /*font-size: large;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*font-weight: 600;*/
        /*height: 1.5em;*/
        /*!*border: 1px solid red;*!*/
        /*position: absolute;*/
        /*top: 10px;*/
        /*!*width: 100%;*!*/

    /*}*/
    /*#findFriend p span{*/
        /*margin: 0 auto;*/
        /*color: #808080;*/
        /*font-size: x-large;*/
        /*position: absolute;*/
        /*left: 75px;*/
    /*}*/
    /*#findFriend p:nth-child(3){*/
        /*display: flex;*/
        /*align-items: center;*/
        /*width: 10em;*/
        /*height: 150px;*/
    /*}*/
    /*#findFriend button{*/
        /*position: absolute;*/
        /*top: 120px;*/
        /*color: white;*/
        /*background-color: #ff0a60;*/
        /*height: 35px;*/
        /*border: none;*/
        /*padding: 5px 10px 5px 10px;*/
        /*border-radius: 5px;*/
    /*}*/
    /*#findFriend button:hover{*/
        /*filter: opacity(90%);*/
        /*cursor: pointer;*/
    /*}*/
</style>